import { Dialog, DialogProvider, openDialog } from "@/components/dialog";
import { Button } from "@/components/ui/button";
import { createFileRoute } from "@tanstack/react-router";
import { useState } from "react";

export const Route = createFileRoute("/examples/dialog/")({
  component: RouteComponent,
});

function RouteComponent() {
  const [open, setOpen] = useState(false);
  return (
    <div>
      <Button
        onClick={() => {
          setOpen(true);
        }}
      >
        按钮
      </Button>
      <Dialog
        title={"hello"}
        open={open}
        onOpenChange={setOpen}
        actions={[
          {
            children: "保存",
            onClick: async () => {
              await new Promise((resolve) =>
                setTimeout(() => resolve(1), 1000)
              );
              setOpen(false);
            },
          },
        ]}
      >
        <div className="">world</div>
      </Dialog>
      <Button
        onClick={() => {
          openDialog({
            title: "hello",
            children: <div className="">world</div>,
          });
        }}
      >
        openDataDialog
      </Button>
      <DialogProvider />
    </div>
  );
}
